<template>
  <div :id>
    <h1 :="obj">Home Page</h1>
    <p :[attrbute]="attrbuteValue">This is the home page</p>
		<button @click="handleClick">Click me</button>
		<P>{{ obj3.nested.count }}{{ obj3.arr.join(' ') }}</P>
		<button @click="handleClick2">Click me obj4</button>
		<span id="obj4">{{ obj4.name }}</span>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef,nextTick} from 'vue'
interface Person {
  name: string
  age: number
  city: string
}
interface obj3Type {
	nested: { count: number }
	arr: string[]
}
const id = ref<string>('home')
const obj = ref<Person>({ name: 'John', age: 30, city: 'New York' })
const attrbute = ref<string>('AAa').value + 'ccc'
const attrbuteValue = ref<string>('bBb')
const obj2 = reactive<Person>({ name: 'Mary', age: 25, city: 'Los Angeles' })
const obj3 = ref<obj3Type>({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function handleClick() {
	obj3.value.nested.count++
	obj3.value.arr.push('baz')
}
const obj4 = shallowRef<Person>({ name: 'Tom', age: 40, city: 'Chicago' })
async function handleClick2() {
	// obj4.value.name = 'Jerry'
	obj4.value = { name: 'Jerry', age: 40, city: 'Chicago' }
	console.log(document.getElementById('obj4')?.textContent);
	await nextTick()
	console.log(document.getElementById('obj4')?.textContent);

}
</script>
